<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Bing Maps Canvas Layer - Extended Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body onload="loadMap();">

<div id='mapDiv' style="width:100%; height: 100%;"></div>

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" src="js/jscache.min.js"></script>
<script type="text/javascript" src="data/sampleData.js"></script>
<script type="text/javascript">


    function loadMap()
    {
        var MM = Microsoft.Maps;
        var map = new MM.Map(document.getElementById("mapDiv"), {
            center: new MM.Location(39.5, -8),
            mapTypeId: MM.MapTypeId.road,
            zoom: 7,
            credentials:"YOUR CREDENTIALS"});


        MM.registerModule("CanvasTileLayerModule", "js/CanvasTileLayerModule.min.js");
        MM.loadModule("CanvasTileLayerModule", {
            callback: function () {

                new CanvasTileLayer(map,
                        {
                            debugMode: false,
                            cacheTiles: true,
                            drawTile: function(context, tile) {

                                var steps = 4;
                                var stepSize = 256 / steps;

                                context.strokeStyle = "rgba(50, 50, 50, 0.6)";

                                context.beginPath();


                                for(var i=1; i <= steps; i++) {

                                    context.moveTo(stepSize * i,0);
                                    context.lineTo(stepSize * i,256);

                                    context.moveTo(0, stepSize * i);
                                    context.lineTo(256, stepSize * i);

                                }

                                context.closePath();
                                context.stroke();


                                var items = new Array(8);
                                for (var i = 0; i < items.length; i++) {
                                    items[i] = new Array(8);
                                    for(var j=0; j < items[i].length; j++) {
                                        items[i][j] = 0;
                                    }
                                }

                                var maxCount = 0;

                                for (var i = 0; i < sampleData.length; i++) {

                                    var canvasPixel = tile.getLocationPixelOffset(sampleData[i]);
                                    var x = canvasPixel.x;
                                    var y = canvasPixel.y;

                                    if(canvasPixel.x < 0 || canvasPixel.x > 256 || canvasPixel.y < 0 || canvasPixel.y > 256) {
                                        continue;
                                    }

                                    var indexX = Math.floor(x / stepSize);
                                    var indexY = Math.floor(y/ stepSize);

                                    items[indexX][indexY]++;

                                }

                                context.font = "bold 16px Arial";
                                context.fillStyle = "black";
                                context.textAlign = "center";
                                context.textBaseline = "middle";

                                context.shadowColor = 'black';
                                context.shadowBlur = 2;
                                context.shadowOffsetX = 2;
                                context.shadowOffsetY = 2;

                                var maxOpacity = 0.6;

                                var maxCount = 15;

                                for (var i = 0; i < items.length; i++) {

                                    for(var j=0; j < items[i].length; j++) {

                                        if(items[i][j] > 0) {

                                            var opacity = items[i][j] * maxOpacity / maxCount;

                                            var textColor = 255;

                                            context.fillStyle = "rgba(255, 0, 0," + opacity + ")";
                                            context.fillRect(i * stepSize, j * stepSize, stepSize, stepSize);


                                            context.fillStyle = "rgba(" + textColor + ", " + textColor + ", " + textColor + ", 0.8)";
                                            context.fillText(items[i][j].toString(), i * stepSize + (stepSize/2)  , j * stepSize + (stepSize/2));



                                        }

                                    }
                                }




                            }

                        });



            }});
    }

    function drawTile(context, tile) {

        var radius = 15;
        var diameter = radius *2;

        for (var i = 0; i < points.length; i++) {

            var canvasPixel = tile.getLocationPixelOffset(points[i]);
            var x = canvasPixel.x;
            var y = canvasPixel.y;

            if(canvasPixel.x < -diameter || canvasPixel.x > 256 + diameter || canvasPixel.y < -diameter || canvasPixel.y > 256 + diameter) {
                continue;
            }

            // Circle
            context.beginPath();
            context.arc(x, y, radius, 0, 2 * Math.PI, false);

            // Fill (Gradient)
            var grd = context.createRadialGradient(x, y, 5, x, y, radius);
            grd.addColorStop(0, "#8ED6FF");
            grd.addColorStop(1, "#004CB3");
            context.fillStyle = grd;

            // Shadow
            context.shadowColor = "#666666";
            context.shadowBlur = 5;
            context.shadowOffsetX = 7;
            context.shadowOffsetY = 7;
            context.fill()

            context.lineWidth = 2;
            context.strokeStyle = "black";
            context.stroke();

            // Text
            context.lineWidth = 1;
            context.fillStyle = "#000000";
            context.lineStyle = "#000000";
            context.font = "12px sans-serif";
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText((i + 1).toString(), x, y);

        }

    }

</script>
</body>
</html>